<template>
  <div class="web-menu">
    <div class="nav-wrapper" :class="{ open: showDrop }">
      <div class="menu">
        <div class="content cursor-pointer tracking-3px" @click="toggleDrop">
          <!-- Catalogue -->
          <!-- <icon-font name="menu transform scale-95" class="mr-6px text-12px" /> -->
          目录
          <icon-font name="arrow-down transform scale-95" class="arrow" :class="{ show: showDrop }" />
        </div>
      </div>
      <div v-show="showDrop">
        <scroll-mask class="main-menu">
          <div ref="parentNodeRef" class="z-1 relative" :class="{ 'flex': showBar }">
            <div v-if="showBar" class="bar"></div>
            <parent-node class="flex-1 z-2" />
          </div>
        </scroll-mask>
      </div>
    </div>
    <!-- peek节点返回 -->
    <peek-back />
  </div>
</template>
<script lang="ts" setup name="WebMenu">
const showDrop = ref(true)
const showBar = ref(true)
const parentNodeRef = ref(null)
const MAX_HEIGHT = 470

const toggleDrop = () => {
  showDrop.value = !showDrop.value
}

nextTick(() => {
  const { height } = parentNodeRef.value.getBoundingClientRect()

  if (height > MAX_HEIGHT) {
    showBar.value = false
  }
})

</script>
<style lang="scss" scoped>
.web-menu {
  @apply absolute right-0 z-200;
  width: 164px;
  top: 114px;
  left: 20px;

  .nav-wrapper {
    position: relative;
    border-radius: 24px 24px 0 24px;
    width: 100%;
    height: 40px;
    border: 1px solid #E5ECF1;
    border-radius: 24px 27px 0 24px;
    background: linear-gradient(135deg, rgba(215, 228, 255, 0.49) 0%, rgba(215, 228, 255, 0.11) 100%);
    box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.15);

    &::after {
      @apply h-full absolute backdrop-blur-3px backdrop-filter;
      content: '';
    }

    .menu {
      @apply relative w-full;
      height: 40px;

      .content {
        @apply flc h-full absolute -top-1px -right-4px;
        width: 130px;
        height: 41px;
        font-size: 16px;
        font-weight: 600;
        color: #3B5379;
        line-height: 22px;
        text-shadow: 0px 2px 17px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(255, 255, 255, 0.12);
        background: url('@/assets/images/pc/menu-header.png') no-repeat;
        background-size: contain;

        .arrow {
          font-size: 22px;
          font-weight: bold;
          transition: transform 0.3s;

          &.show {
            transform: rotate(-180deg);
          }
        }

      }
    }
  }

  .open {
    @apply h-full relative;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    // overflow: inherit;
    background: linear-gradient(135deg, rgba(215, 228, 255, 0.49) 0%, rgba(215, 228, 255, 0.11) 100%);

    &::after {
      @apply h-full absolute backdrop-blur-3px backdrop-filter;
      content: '';
    }

    // ::-webkit-scrollbar-x {
    //   display: none;
    // }

    .menu {
      .content {
        color: #3B5379;
      }
    }

    .bar {
      @apply backdrop-blur-5px backdrop-filter;

      width: 8px;
      background: rgba(253, 253, 253, 0.4);
      box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.05);
      border-radius: 20px;
    }

    .main-menu {
      @apply overflow-x-hidden;
      height: calc(100% - 20px);
      margin: 20px 7px 20px 5px;
      max-height: 470px;

      // &::-webkit-scrollbar {
      //   width: 6px;
      // }

      // &::-webkit-scrollbar-track {
      //   background: rgba(253, 253, 253, 0.10);
      // }

      // &::-webkit-scrollbar-thumb,
      // &::-webkit-scrollbar-thumb:hover,
      // &::-webkit-scrollbar-thumb:active {
      //   background: rgba(66, 89, 129, 0.40);
      // }
      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-thumb,
      &::-webkit-scrollbar-thumb:hover,
      &::-webkit-scrollbar-thumb:active {
        background: #ffffff;
      }
    }
  }
}
</style>